<script setup>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from 'vue'

  // 挂载之前
  onBeforeMount(() => {
    console.log("--------------onBeforeMount-----------------")
    console.log(document.getElementById("s1")) // 此时 DOM 未挂载，会输出 null
 })
  // 挂载完成
  onMounted(() => {
    console.log("--------------onMounted----------")
        console.log(document.getElementById("s1"))// 此时 DOM 已挂载，能获取到内容

  })
  // 更新之前
  onBeforeUpdate(() => {
    console.log("------------onBeforeUpdate---------------")
    let ele = document.getElementById("s1")
    console.log(ele.innerText)//输出更新前的内容
  })
  // 更新之后
  onUpdated(()=>{
    console.log("---------------onUpdated-------")
    let ele = document.getElementById("s1")
    console.log(ele.innerText)//输出更新后的内容
  })
  let message = ref(1)
</script>

<template>
  <div>
    <span id = "s1">{{message}}</span>
    <button @click="message++">changeMessage</button>
  </div>
</template>

<style scoped>

</style>
